"use client";

import React, { useState } from "react";
import Image from "next/image";
import TransportItem from "@/components/TransportItem";
export default function PriceAndService() {
  const types = ["运费标准", "会员体系", "增值服务", "转运时效", "分享有礼"];
  const [active, setActive] = useState(0);
  return (
    <>
      <section className="bg-module_bg bg-center bg-[length:1920px_650px] h-[650px]  overflow-auto relative">
        <div className="w-[1200px]  mx-auto">
          <Image
            src={"/assets/price/Price and Service.png"}
            className="mt-[257px]"
            alt=""
            width={496}
            height={60}
          ></Image>

          <Image
            src={"/assets/price/price.png"}
            className="mt-3"
            alt=""
            width={300}
            height={60}
          ></Image>
        </div>
      </section>
      <section className="bg-repect_bg bg-repeat-y  bg-top bg-[length:1920px_1640px]">
        <div className="w-[1400px]  mx-auto -translate-y-[50px]">
          <div className="w-[1400px] h-[100px] bg-white rounded-[20px] py-5">
            <ul className="flex justify-center gap-[115px] h-[60px]">
              {types.map((item, index) => {
                return (
                  <li
                    key={index}
                    className={`inline-block leading-[60px] hover:text-[#FFA018] text-[22px] text-center cursor-pointer ${
                      active == index ? "text-[#FFA018]" : ""
                    }`}
                    onClick={() => setActive(index)}
                  >
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>

          <div className="w-[1400px] mt-[70px] bg-white rounded-[20px] px-[50px] py-[60px]">
            <div className="flex justify-between">
              <TransportItem index={1} label="入库上架" desc='仓库签收入库/上架一般1-2个工作日(节假日除外)内完成。仓库周日休息。超过3个工作日(节假日除外)未入库请及时联系官方客服。' />
              <TransportItem index={2} label="分拣打包" desc='提交发货后仓库须分拣、配货、打包、称重等多个步骤，分拣到打包计费一般2-4个工作日(节假日除外)内完成。计费完毕系统将自动扣款，请保证余额充足;若余额不足，充值后系统会再次自动扣款。因库存空间有限请72小时内及时付款，超时将会产生仓储费用' />
            </div>
            <div className="flex justify-center mt-16">
              <TransportItem index={3} label="转仓" desc='免税州转仓到纽约总仓出库，转仓一般会在3天内完成。每周安排2-4次转仓。' />
            </div>
            <div className="flex justify-between mt-16">
              <TransportItem index={4} label="出库" desc='集装箱送往机场，排队上飞机视为运输开始，纽约总仓除周日外每天均有航班出港，转仓后会安排最近的航班出库。如遇节假日、违禁品和货物其他问题等航班可能延迟或者停飞。' />
              <TransportItem index={5} label="清关" desc='清关，一般1-10个工作日均属于正常时效，海关查验时效相应延长。如遇退港等特殊情况，闪闪转运将对包裹负责到底，无需客户额外支付费用。' />
            </div>
          </div>

          <div className="w-[1400px] mt-[70px] bg-white rounded-[20px] px-[50px] py-[60px]">
            <div className="w-full h-[226px] bg-gradient-to-r from-[#DBEDFE] to-[#FFE5CF] pl-[50px] pr-[120px] py-10">
              <p className="font-medium leading-8 text-[#e7630b] text-[20px]">
                ★ 2023闪闪转进「晒单返现」活动升级!返现额度高!{" "}
              </p>
              <p className="font-medium leading-8 text-[#e7630b] text-[20px] mt-2">
                ★ 单篇晒单返现20元起，优质高流量晒单还有额外奖励~
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-5">
                您收到包裹90天内，在
                <span className="text-[#3E94FF]">
                  55海淘、小红书、抖音、微博、贴吧
                </span>
                等社交平台晒单，即可参加活动，获得返现奖励，每篇晒单最低返现20元，优质晒单还有额外奖励。
              </p>
            </div>
            <div className="w-full  mt-[70px] bg-[#FDAA38] pl-[50px] pr-[120px] py-10 bg-opacity-5">
              <p className="font-medium leading-8 text-[#e7630b] text-[20px]">
                ★ 2023闪闪转进「晒单返现」活动升级!返现额度高!{" "}
              </p>
              <p className="font-medium leading-8 text-[#e7630b] text-[20px] mt-2">
                ★ 单篇晒单返现20元起，优质高流量晒单还有额外奖励~
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-1">
                ★ 晒单的内容需符合以下要求:
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-1">
                (1)正向引导，推荐闪闪转运转运;
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-1">
                (2)闪闪转运相关内容，字数在50字以上;
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-1">
                (3)实拍图片或者视频(图片2张以上);
              </p>
              <p className="font-medium leading-9 text-[#333] text-[20px] mt-1">
                (4)闪闪转运邀请码(用户编号)。
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
